<template>
	<view class="container">
		<view class="head">

			<image :src="img" mode="heightFix" @click="yulan"></image>
		</view>

		<view class="zhu">
			<view class="dengji" @click="tianjia">
				{{data.grade}}
			</view>
			<view class="xiugai">
				点击修改
			</view>
			<view class="name">
				姓名：<text class="names">
					{{data.name}}
				</text>
			</view>
			<view class="birth">
				生辰：{{data.birth}} - {{data.die}}
			</view>
			<view class="age">
				享年：{{data.age}} 岁
			</view>
			<view class="title">
				别称：{{data.title}}
			</view>
			<view class="nature">
				性格：{{data.nature}}
			</view>
		</view>
		<view class="jianjie">
			<view class="add" v-if="jianjie == ''" @click="addjianjie">
				添加简介
			</view>
			<view class="add" v-else @click="addjianjie">
				修改简介
			</view>
			<view class="head">
				人物简介：
			</view>
			<view class="contain">
				<view v-for="(item,index) in jianjiearr" :key="index">
					{{item}}
				</view>
			</view>
		</view>

		<!-- 显示居中弹窗 添加人物-->
		<!-- 普通弹窗 -->
		<uni-popup ref="tianjia" background-color="#fff" @change="change" class="fuchuang">
			<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
				<h3>添加人物：</h3>
				<form>
					<uni-easyinput class="uni-mt-5" trim="all" v-model="tianjias.name" placeholder="姓名"></uni-easyinput>
					<uni-easyinput class="uni-mt-5" trim="all" v-model="tianjias.presonimg"
						placeholder="人物图片链接:"></uni-easyinput>
					<button @click="addrenwuimage">添加人物图片</button>
					<uni-easyinput type="number" class="uni-mt-5" trim="all" v-model="tianjias.dangqianyear"
						placeholder="几几年"></uni-easyinput>
					<uni-easyinput type="number" class="uni-mt-5" trim="all" v-model="tianjias.dangqianage"
						placeholder="多少岁"></uni-easyinput>
					<uni-easyinput class="uni-mt-5" trim="all" v-model="tianjias.briqi"
						placeholder="出生几月几日-0418"></uni-easyinput>
					<uni-easyinput class="uni-mt-5" trim="all" v-model="tianjias.driqi"
						placeholder="死亡几月几日-0418"></uni-easyinput>
					<uni-easyinput type="number" class="uni-mt-5" trim="all" v-model="tianjias.age"
						placeholder="阳寿:"></uni-easyinput>
					<uni-easyinput class="uni-mt-5" trim="all" v-model="tianjias.grade"
						placeholder="等级[1-10]"></uni-easyinput>
					<uni-easyinput class="uni-mt-5" trim="all" v-model="tianjias.title"
						placeholder="名誉称号['-'隔开]"></uni-easyinput>
					<uni-easyinput type="number" class="uni-mt-5" trim="all" v-model.number="tianjias.sex"
						placeholder="性别[1男0女]"></uni-easyinput>
					<uni-easyinput class="uni-mt-5" trim="all" v-model="tianjias.nature"
						placeholder="性格['-'隔开]"></uni-easyinput>
					<uni-easyinput class="uni-mt-5" trim="all" v-model="tianjias.novel"
						placeholder="小说"></uni-easyinput>

					<button type="button" @click="submitForm2">提交</button>
				</form>
			</view>
		</uni-popup>
		
		<uni-popup ref="jianjie" background-color="#fff" @change="change" class="fuchuang">
			<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
				<h3>添加人物简介：</h3>
			
				<form>
					<textarea  v-model="jianjie" value="" placeholder="请输入:" />
					<button type="button" @click="subjianjie">提交</button>
				</form>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				jianjiearr:['空'],
				jianjie:'',
				data: {},
				img: 'https://wx4.sinaimg.cn/mw2000/0085hC9mly8gyel2f16yoj30hs0hsmxz.jpg',
				// 添加人物
				tianjias: {
					_id:'',
					briqi: '',
					driqi: '',
					dangqianyear: null,
					dangqianage: null,
					presonimg: '',
					name: '',
					birth: '',
					die: '',
					grade: '',
					title: [],
					age: '',
					sex: '',
					nature: [],
					novel: '',
					birthyear: '',
					dieyear: ''
				
				},
				// 居中弹出层
				type: 'left'

			}
		},
		onLoad: function(options) {
			console.log(options);
			var a = JSON.parse(decodeURIComponent(options.a));
			console.log(a); // 输出变量a的JSON数据
			this.data = a;
			this.tianjias = a;
			
			this.isimg(a.presonimg)
			
			
			
			
		},
		methods: {
			//判断是否图片路径，是就显示，否则默认图片格式
			isimg(e){
				var str = e;
				// 正则表达式，匹配常见的图片格式结尾
				var regex = /\.(jpg|jpeg|png|gif|bmp)$/i;
				// 使用test方法检测字符串是否以图片格式结尾
				var isImage = regex.test(str);
				if (isImage) {
					this.img = str;
				}
			},
			//添加简介
			addjianjie(){
				console.log(123);
				this.$refs.jianjie.open('center')
				
			},
			//提交简介
			subjianjie(){
				console.log(this.jianjie);
				let arr = this.jianjie.split('\n'); // 将字符串按换行符分割为数组
				console.log(arr);
				this.jianjiearr = arr
				this.$refs.jianjie.close('center')	
				this.tianjias.jianjie = this.jianjie;
				this.submitForm2()
			},
			
			//点击预览图片
			yulan(){
				let img = this.img;
				 uni.previewImage({
					urls:[img],
					current: img
				  });
			},
			
			//添加人物图片
			addrenwuimage() {
				uni.showLoading({
					title: '提交中...',
					mask: true
				});
				let that = this;
				uni.chooseImage({
					count: 1, // 最多可选择的图片数量，默认为 9
					sizeType: ['original', 'compressed'], // 可以指定选择原图或压缩图，默认为 ['original', 'compressed']
					sourceType: ['album', 'camera'], // 可以指定选择图片的来源，默认为 ['album', 'camera']
					success: function(res) {
						// 选择图片成功
						let tempFilePaths = res.tempFilePaths; // 图片的临时文件路径数组
						console.log('选择的图片路径:', tempFilePaths);
						const name = res.tempFiles[0].name // 选择图片的名称.后缀名
						console.log(name);
						uniCloud.uploadFile({
							filePath: tempFilePaths[0],
							cloudPath: Date.now() + "-" + name, // 这样写上传的图片后缀名就是原本的后缀名（也就是我最终想实现的效果）
						}).then(res => {
							console.log(res.fileID)
							that.tianjias.presonimg = res.fileID;
							uni.hideLoading()
							uni.showToast({
								title: '添加成功',
								icon: 'success'
							});
						})
					},
					fail: function(err) {
						// 选择图片失败
						console.error('选择图片失败:', err);
					}
				});
			},
			submitForm2() {
				console.log(this.tianjias);
				let that = this;
				uni.showLoading({
					title: '提交中...',
					mask: true
				});
			
				let chusheng = this.tianjias.dangqianyear - this.tianjias.dangqianage;
				let siwang = parseInt(chusheng) + parseInt(this.tianjias.age);
				console.log(siwang);
				this.tianjias.birth = parseInt(chusheng + this.tianjias.briqi);
				this.tianjias.die = parseInt(siwang.toString() + this.tianjias.driqi);
				console.log(this.tianjias.birth, this.tianjias.die);
				
				let num = this.tianjias.birth;
				const birthyear = Math.floor(num / 10000); // 提取年份
				const birthmonth = Math.floor((num % 10000) / 100); // 提取月份
				const birthday = num % 100; // 提取日期
				
				num = this.tianjias.die;
				const dieyear = Math.floor(num / 10000); // 提取年份
				const diemonth = Math.floor((num % 10000) / 100); // 提取月份
				const dieday = num % 100; // 提取日期
				
				this.tianjias.birthyear = birthyear;
				this.tianjias.dieyear = dieyear;
				
				//将title字符串转化为数组-后台实现
				
				let obj = this.tianjias;
				console.log(obj);
				let novel = this.tianjias.novel;
				console.log(novel);
				console.log(obj._id);
				//将人物添加到人物库
				uniCloud.callFunction({
					name: "xiugairenwu",
					data: obj
				}).then(res => {
					console.log(res);
					uni.hideLoading();
					uni.showToast({
						title: '修改成功',
						icon: 'success'
					});
					that.$refs.tianjia.close('center')
					
				}).catch(err => {
					console.error(err);
					uni.hideLoading();
					uni.showToast({
						title: '添加失败',
						icon: 'none'
					});
				});
				
				
			},
			// 添加人物
			tianjia() {
				this.$refs.tianjia.open('center')
			
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		background-color: #d0e3ce;

		.head {

			width: 100%;
			height: 300px;

			image {
				height: 100%;
			}

			text-align: center;
		}

		.zhu {
			padding: 10px 20px;
			font-weight: 800;
			border-bottom: 5px solid #b3d1b1;
			border-top: 5px solid #60775e;
			position: relative;
			.xiugai{
				top: 60px;
				right: 20px;
				position: absolute;
				font-size: 10px;
				font-weight: normal;
				color: red;
			}
			.dengji {
				// font-weight: 800;
				top: 20px;
				right: 20px;
				position: absolute;
				font-size: 30px;
				height: 40px;
				width: 40px;
				// display: flex;
				text-align: center;
				line-height: 40px;
				color: #fff;
				// align-content: center;
				// justify-content: center;
				border-radius: 50%;
				background-color: #0E632C;
			}

			.name {
				.names {
					color: red;
					font-family: '楷体', 'KaiTi', sans-serif;
					font-size: 40px;
					border-bottom: 1px solid #000;
				}
			}

			view {
				margin-top: 5px;
			}
		}

		.jianjie {
			position: relative;

			.head {
				height: 20px;
				padding: 10px 20px;
				font-size: 20px;

			}

			.contain {
				font-size: 15px;
				font-family: '楷体', 'KaiTi', sans-serif;
				padding: 10px 20px;
				text-indent: 2em;
				
			}
			.add{
				color: green;
				position: absolute;
				right: 20px;
				top: 10px;
				text-decoration: underline;
				font-size: 10px;
			}
		}
	}
</style>